<template>
  <div class="app-container layout-container column-layout">
    <!-- 过滤 start -->
    <div class="app-container filter-box">
      <div class="filter-box__left">
        <div class="filter-item">
          <span class="filter-item-label">模板名称</span>
          <el-input placeholder="请输入" v-model="tableParams.name" clearable />
        </div>
        <div class="filter-item">
          <span class="filter-item-label" style="text-align: right">状态</span>
          <el-select placeholder="请选择" v-model="tableParams.status">
            <el-option label="启用" :value="true"></el-option>
            <el-option label="停用" :value="false"></el-option>
          </el-select>
        </div>
      </div>
      <div class="filter-box__right">
        <el-button type="primary" icon="Search" @click="handleQueryTemplate">查询</el-button>
        <el-button type="primary" plain icon="RefreshRight" @click="handelResetFilter">重置</el-button>
      </div>
    </div>
    <!--  过滤 end  -->

    <!--  操作按钮 start  -->
    <div class="template-buttons">
      <el-button type="primary" plain @click="goContractingParty">配置签约主体</el-button>
      <el-button type="primary" @click="handelAddTemplate">新建模板</el-button>
    </div>
    <!--  操作按钮 end  -->
    <!--  模板列表 start  -->
    <el-table
      v-loading="isLoadingList"
      :data="tableData"
      stripe
      style="width: 100%"
      border
      :header-cell-style="{ background: '#F2F6FC !important', color: '#909399', 'font-weight': 400, 'font-size': '14px' }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="templateName" label="模板名称" width="250" show-overflow-tooltip />
      <el-table-column prop="description" label="描述" show-overflow-tooltip />
      <el-table-column label="状态" align="center" width="100">
        <template #default="{ row }">
          <el-switch v-model="row.status" :loading="row.isLoadingStatus" @change="changeTemplateStatus(row)" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="180" />
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="{ row }">
          <el-button style="color: #409eff" type="primary" link @click="handelEdit(row)">编辑</el-button>
          <el-button style="color: #409eff" type="primary" link @click="handelEdit(row, true)">复制</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-pagination
      :total="listTotal"
      v-model:limit="tableParams.size"
      v-model:page="tableParams.current"
      layout="total, slot, prev, pager, next, jumper"
      @pagination="handelPage"
    >
    </custom-pagination>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import { useRouter } from "vue-router";
import _ from "lodash";
import { tableRowClassName } from "@/utils/util.js";
import { contractTemplateList, setTemplateStatus } from "@/apis/contractTemplate";
import { microAppMainRouter } from "@/microApp/utils.js";

const { proxy } = getCurrentInstance();
const router = useRouter();

/**
 * 模板列表
 */
const isLoadingList = ref(false);
const listTotal = ref(0);
const tableParams = ref({
  current: 1,
  size: 10,
  name: "",
  status: true
});
const tableData = ref([]);
const getContractTemplateList = async () => {
  try {
    isLoadingList.value = true;
    const { data } = await contractTemplateList(tableParams.value);
    tableData.value = data.list ?? [];
    listTotal.value = data.total ?? 0;
    isLoadingList.value = false;
  } catch (err) {
    isLoadingList.value = false;
  }
};
const handelPage = () => {
  tableData.value = [];
  getContractTemplateList();
};
const handleQueryTemplate = _.debounce(getContractTemplateList, 500);
const handelResetFilter = () => {
  tableParams.value = {
    current: 1,
    size: 10,
    name: "",
    status: true
  };
  tableData.value = [];
  getContractTemplateList();
};

/**
 * 改变模板状态
 */
const changeTemplateStatus = async row => {
  try {
    row.isLoadingStatus = true;
    await setTemplateStatus(row.templateId, row.status);
    proxy.$modal.msgSuccess("操作成功");
    row.isLoadingStatus = false;
  } catch (err) {
    row.status = !row.status;
    row.isLoadingStatus = false;
  }
};

/**
 * 配置签约主体
 */
const goContractingParty = () => {
  router.push({
    path: "/contracting-party"
  });
};

/**
 * 新增模板
 */
const handelAddTemplate = () => {
  router.push({
    path: "/new-template"
  });
};

/**
 * 编辑模板
 */
const handelEdit = (row, isCopy) => {
  router.push({
    path: "/new-template",
    query: {
      templateId: row.templateId,
      isCopy
    }
  });
};

getContractTemplateList();
</script>

<style scoped lang="scss">
@import "templateList";
</style>
